<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="showAdd">{{ $t('add') }}</el-button>
      </el-form-item>
    </el-form>
    <div class="uni-scroll" style="height: calc(100vh - 220px)">
      <el-table
        :data="navList"
        style="width: 100%;"
      >
        <el-table-column :label="$t('name')" >
          <template slot-scope="scope">
            <span @click="dictionaries(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="keyName" :label="$t('keyName')"  />
        <el-table-column prop="path" :label="$t('path')"  />
        <el-table-column :label="$t('status')" width="80" >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              disabled
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column width="400" :label="$t('function')" >
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-plus"
              @click="addCompany(scope.row)"
            >{{ $t('add')+$t('company') }}
            </el-button>
            <el-button
              type="text"
              icon="el-icon-s-order"
              @click="listProductNavigationCompany(scope.row)"
            >{{ $t('company') + $t('list') }}
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="edit(scope.row)"
            >{{ $t('edit') }}
            </el-button>
            <el-button
              style="color: #f56c6c"
              type="text"
              icon="el-icon-delete"
              @click="del(scope.row)"
            >{{ $t('delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :visible.sync="dialogCompanyFormVisible"
    >
      <el-table
        :data="navCompanyList"
        style="width: 100%;"
      >
        <el-table-column prop="companyName" :label="$t('name')"  />
        <el-table-column :label="$t('function')" >
          <template slot-scope="scope">
            <el-button
              style="color: #f56c6c"
              type="text"
              icon="el-icon-delete"
              @click="delCompany(scope.row)"
            >{{ $t('delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogFormVisible"
    >
      <el-form
        label-width="20%"
      >
        <el-form-item :label="$t('name')">
          <el-input v-model="nav.name" />
        </el-form-item>
        <el-form-item :label="$t('keyName')">
          <el-input v-model="nav.keyName" :disabled="nav.navigationId" />
        </el-form-item>
        <el-form-item :label="$t('path')">
          <el-input v-model="nav.path" />
        </el-form-item>
        <el-form-item :label="$t('status')">
          <el-switch
            v-model="nav.status"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="nav.keyName"
      :visible.sync="dialogDictionariesVisible"
    >
      <dictionaries-model v-if="dialogDictionariesVisible" :product-id="nav.productId" template-type="navigation" :key-name="nav.keyName" />
    </el-dialog>

  </div>
</template>

<script>
import {
  deleteProductNavigation,
  insertProductNavigation,
  listProductNavigation,
  updateProductNavigation
} from '@/api/iot/iotProductNavigationApi'
import {
  listProductNavigationCompany,
  deleteProductNavigationCompany,
  insertProductNavigationCompany
} from '@/api/iot/iotProductNavigationCompanyApi'
import {
  failureNotice,
  successNotice,
  cancelNotice
} from '@/util/common'
import {
  getCompanyId,
  getUserId
} from '@/util/storage'
import DictionariesModel from '../DictionariesModel'
export default {
  name: 'Navigation',
  components: {
    DictionariesModel
  },
  props: {
    productId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogCompanyFormVisible: false,
      navCompanyList: [],
      navList: [],
      nav: {},
      userId: getUserId(),
      companyId: getCompanyId(),

      dialogDictionariesVisible: false
    }
  },
  created() {
    this.listProductNavigation()
  },
  methods: {
    dictionaries(item) {
      this.nav = item
      this.dialogDictionariesVisible = true
    },
    listProductNavigationCompany(item) {
      listProductNavigationCompany({
        navigationId: item.navigationId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.navCompanyList = data
        } else {
          this.navCompanyList = []
        }
        this.dialogCompanyFormVisible = true
      })
    },
    addCompany(item) {
      const that = this
      this.$prompt(this.$t('company') + this.$t('keyName'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel')
      })
        .then(function(value) {
          if (value.value === '') {
            failureNotice(that)
            return
          }
          insertProductNavigationCompany({
            navigationId: item.navigationId,
            companyKey: value.value
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    showAdd() {
      const nav = {
        productId: this.productId,
        userId: this.userId,
        companyId: this.companyId
      }
      this.nav = nav
      this.dialogFormVisible = true
    },
    addOrUpdate() {
      const json = {
        ...this.nav
      }

      if (!this.nav.navigationId) {
        insertProductNavigation(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogFormVisible = false
          }
          this.listProductNavigation()
        })
      } else {
        updateProductNavigation(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogFormVisible = false
          }
          this.listProductNavigation()
        })
      }
    },
    edit(item) {
      this.nav = item
      this.dialogFormVisible = true
    },

    del(index) {
      const that = this
      this.$confirm(this.$t('delete') + index.name, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteProductNavigation({
            navigationId: index.navigationId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
              that.listProductNavigation()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    delCompany(index) {
      const that = this
      this.$confirm(this.$t('delete') + index.companyName, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteProductNavigationCompany({
            id: index.id
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listProductNavigationCompany(index)
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    listProductNavigation() {
      listProductNavigation({
        productId: this.productId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.navList = data
        }
      })
    }
  }
}
</script>


